<template>
	<div>
		<yd-flexbox class="search" direction="vertical">
			<yd-flexbox-item class="yd-flexbox-item-white">
				<div class="citysesect sc-left hissc-left" style="flex: 5.5;">
					<router-link to="/Myaddress">
						<span v-for="addsitem,key in addressdata" v-if="cityId==addsitem.cityid&&city">{{addsitem.ShortName}}</span>
						<span v-if="!city" ref="address">我的附近</span>
						<img class="sc-more" src="../assets/img/dataimg/images/more_09.png" />
					</router-link>
				</div>
				<div class="mynearby sc-right scr-mapi" @click="getLat()">
					<yd-icon name="location"></yd-icon>
					<span>我的<br />附近</span>
				</div>
			</yd-flexbox-item>
			<yd-flexbox-item class="yd-flexbox-item-white">
				<div class="sc-left" style="width: 100%; justify-content: space-between;">
					<yd-button class="my-housetype hismy-housetype" @click.native="show1 = true" size="large" style="background: #fff;">
						<p v-if="leiType">短租民宿</p>
						<p v-else="leiType">长租公寓</p>
					</yd-button>
					<yd-actionsheet :items="myItems1" v-model="show1" cancel="取消"></yd-actionsheet>
					<img class="sc-more" src="../assets/img/dataimg/images/more_09.png" />
				</div>
			</yd-flexbox-item>
			<yd-flexbox-item v-show="leiType" class="yd-flexbox-item-white">
				<div class="sc-content itemcont">
					<div id="checkinout" style="border: none !important;">
						<div id="firstSelect">
							<div class="Date_lr">
								<P class="date-go">入住-离开日期</p>
								<input class="dateSelect" id="startDate" ref="startDate" type="text" v-model="startDate" style="" readonly>
							</div>
							<div class="Date_lr">
								<input class="dateSelect" id="endDate" ref="endDate" type="text" v-model="endDate" style="" readonly>
							</div>
							<span class="dateSelect span21">共<span class="NumDate" >{{NumDate}}</span>天</span>

						</div>
						<yd-icon class="dateSelect" @click.native="dateclear" name="error-outline"></yd-icon>
					</div>
					<div class="mask_calendar">
						<div class="calendar" ref="setData"></div>
						<!-- 提示 -->
						<div class="calendar_tishi">请选择离开日期...</div>
					</div>
				</div>
			</yd-flexbox-item>
			<yd-flexbox-item class="yd-flexbox-item-white">
				<div class="sc-content" style="width: 100%;">
					<input v-if="leiType" type="text" class="mykey" id="mykey" ref="mykey" v-model="mykey" placeholder="位置地标/房东昵称/房源标题" />
					<input v-else="leiType" type="text" class="mykey" id="mykey" ref="mykey" v-model="mykey" placeholder="位置地标/商户名/房源标题" />
				</div>

			</yd-flexbox-item>

			<yd-flexbox-item class="yd-flexbox-item-white">
				<div class="sc-content" :class="{txtactive:istxtactive}" @click="price_router" style="width: 70%;">
					{{pricemaxtit}}
				</div>
				<yd-icon @click.native="priceclear" name="error-outline" :class="{priceclear:istxtactive}"></yd-icon>
			</yd-flexbox-item>
			<yd-flexbox-item class="yd-flexbox-item-white scc-btn-box">
				<button class="scc-btn" @click="search()">立即搜索</button>
			</yd-flexbox-item>
		</yd-flexbox>
		<yd-flexbox class="yd-flexbox-two" direction="vertical" v-if="histFlag">
			<yd-flexbox-item class="yd-flexbox-item-gray" style="line-height: 1rem;font-size: .3rem;justify-content: space-between;">
				<div class="sc-left history-title">
					历史搜索
				</div>
				<div class="sc-right">
					<yd-button class="history-title" style="font-size: .28rem !important;" @click.native="openConfrim" size="large">清空</yd-button>
				</div>
			</yd-flexbox-item>
			<yd-flexbox-item class="yd-flexbox-item-gray" v-for="item,key in historyList" :key="key">
				<div class="yfig-icon"><img src="../assets/img/images/his.png" /></div>
				<div class="yfig-content">
					<p class="history-city" v-if="item.mykey!=null">{{item.mykey}}（{{item.hiscity}}）</p>
					<p class="history-city" v-if="item.mykey==null">{{item.hiscity}}</p>
					<p class="history-type" v-if="item.startDate!=''">{{item.startDate}}-{{item.endDate}}/{{item.hishousetype}}{{item.pricemaxtit}}</p>
					<p class="history-type" v-if="item.startDate==''">{{item.hishousetype}}{{item.pricemaxtit}}</p>
				</div>
			</yd-flexbox-item>
		</yd-flexbox>

	</div>
</template>
<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import data2 from "../../static/date2.js";
	export default {
		name: "search",
		data() {
			var that = this;
			return {
				city: that.$route.query.city,
				cityId: that.$route.query.cityId,
				sminprice: that.minprice,
				smaxprice: that.maxprice,
				show1: false,
				ishousetype: true,
				leiType: true,
				myItems1: [{
					label: '短租民宿',
					callback: () => {
						that.ishousetype = true;
						that.leiType = true;
						that.sminprice = 0;
						that.smaxprice = 500;
					}
				}, {
					label: '长租公寓',
					callback: () => {
						that.ishousetype = false;
						that.leiType = false;
						that.sminprice = 0;
						that.smaxprice = 3000;
					},
				}],
				historyList: [],
				histFlag: false,
				mykey: "",
				lat: that.$route.query.lat,
				lng: that.$route.query.lng,
				check_in_time: [],
				check_out_time: [],
				startDate: '',
				endDate: '',
				NumDate: '',
				isFirstEnter: false // 是否第一次进入，默认false
			}
		},
		computed: {
			...mapGetters([
				'source',
				'addressdata',
				'minprice',
				'maxprice',
				"pricemaxtit",
				"istxtactive"
			])
		},
		beforeRouteEnter(to, from, next) {
			if(from.name == 'Myaddress') {
				location.reload();
			}
			if(from.name == 'longList' || from.name == 'shortList' || from.name == 'price') {
				to.meta.isBack = true;
			}
			next();
		},
		activated() {
			var that = this;
			if((!that.$route.meta.isBack) || that.isFirstEnter) {

				that.city = that.$route.query.city;
				that.cityId = that.$route.query.cityId;
				that.show1 = false;
				that.ishousetype = true;
				that.leiType = true;
				that.historyList = [];
				that.histFlag = false;
				that.mykey = "";
				that.lat = that.$route.query.lat;
				that.lng = that.$route.query.lng;
				that.check_in_time = [];
				that.check_out_time = [];
				that.startDate = '';
				that.endDate = '';
				that.NumDate = '';
				that.isFirstEnter = false; // 是否第一次进入，默认false

				that.dateclear();
				that.getCityInfo();
				$(".price").text("价格");
				document.body.style.overflow = "visible";
				document.querySelector("html").style.overflow = "visible";
				that.datetime();
				that.leiType = that.$route.query.leiType;
				if(that.leiType == undefined) {
					that.leiType = true;
				}
				$(".dateZone").css("margin-top", "1rem")

				that.setminprices(0);
				that.setmaxprices(500);
				that.sminprice = that.minprice;
				that.smaxprice = that.maxprice;
				that.priceclear();
			} else {

				that.sminprice = that.minprice
				that.smaxprice = that.maxprice
			}
			
			if(sessionStorage.getItem("hissessset") != null) {
				that.histFlag = true;
				let getHiss = JSON.parse(sessionStorage.getItem("hissessset"));
				that.historyList = getHiss;
				for(var i = 0; i < that.historyList.length; i++) {
					if(that.historyList[i].pricemaxtit == "价格") {
						that.historyList[i].pricemaxtit = ""
					} else {
						that.historyList[i].pricemaxtit = "/" + that.historyList[i].pricemaxtit;

					}
				}
			} else {
				that.histFlag = false;
			}

			that.$route.meta.isBack = false;
			that.isFirstEnter = false;

		},
		created() {
			var that = this;
			that.isFirstEnter = true;
		},
		methods: {
			...mapActions({
				getCityInfo: "getCityInfo",
				setmaxprices: "setmaxprices",
				setminprices: 'setminprices',
				setmaxprices: 'setmaxprices',
				setistxtactive: "setistxtactive",
				setpricemaxtit: "setpricemaxtit"
			}),
			priceclear() {
				this.setpricemaxtit("价格");
				this.setistxtactive(false);
			},
			//				城市数据

			getdate() {
				var that = this;
				//				转为时间戳
				//					开始时间
				var sdate = new Date(that.startDate);
				that.check_in_time = sdate.getTime() / 1000;
				//					结束时间
				var edate = new Date(that.endDate);
				that.check_out_time = edate.getTime() / 1000;
			},
			price_router() {
				var that = this;
				if(that.leiType) {
					that.$router.push({
						path: "/price",

					})
					that.setmaxprices(500);
				}
				if(!that.leiType) {
					that.$router.push({
						path: "/price",
					})
					that.setmaxprices(3000);
				}

			},
			openConfrim() {
				var that = this;
				that.$dialog.confirm({
					title: '提示',
					mes: '确认清空搜索历史？',
					opts: () => {
						that.histFlag = false;
						sessionStorage.removeItem("hissessset");
					}
				});
				document.querySelector(".yd-confirm-hd").style.textAlign = "center";
				document.querySelector(".yd-confirm-bd").style.textAlign = "center";
			},
			datetime() {
				var that = this;
				$('#firstSelect').on('click', function(e) {
					e.stopPropagation();
					e.preventDefault();
					$('.mask_calendar').show();
				});
				$('.mask_calendar').on('click', function(e) {
					e.stopPropagation();
					e.preventDefault();
					if(e.target.className == "mask_calendar") {
						$('.calendar').slideUp(200);
						$('.mask_calendar').fadeOut(200);
					}
				})
				$('#firstSelect').calendarSwitch({
					selectors: {
						sections: ".calendar"
					},
					index: 7, //展示的月份个数
					animateFunction: "slideToggle", //动画效果
					controlDay: true, //知否控制在daysnumber天之内，这个数值的设置前提是总显示天数大于90天
					daysnumber: "210", //控制天数
					comeColor: "#e25051", //入住颜色
					outColor: "#e25051", //离店颜色
					comeoutColor: "#ffb0b1", //入住和离店之间的颜色
					callback: function() { //回调函数
						$('.mask_calendar').fadeOut(200);
						var startDate = $('#startDate').val(); //入住的天数
						var endDate = $('#endDate').val(); //离店的天数
						var NumDate = $('.NumDate').text(); //共多少晚
						//												console.log($('#endDate').val())
						that.startDate = startDate;
						that.endDate = endDate;
						that.NumDate = NumDate;
						//												that.isdatetitle = false

						//下面做ajax请求
					},
					comfireBtn: '.comfire' //确定按钮的class或者id

				});
				var b = new Date();
				var ye = b.getFullYear();
				var mo = b.getMonth() + 1;
				mo = mo < 10 ? "0" + mo : mo;
				var da = b.getDate();
				da = da < 10 ? "0" + da : da;
				$('#startDate').val(ye + '-' + mo + '-' + da);
				//								that.startDate = ye + '-' + mo + '-' + da;
				b = new Date(b.getTime() + 24 * 3600 * 1000);
				var ye = b.getFullYear();
				var mo = b.getMonth() + 1;
				mo = mo < 10 ? "0" + mo : mo;
				var da = b.getDate();
				da = da < 10 ? "0" + da : da;
				$('#endDate').val(ye + '-' + mo + '-' + da);
				//								that.endDate = ye + '-' + mo + '-' + da;
			},
			dateclear() {
				$(".dateSelect").hide();
				$(".date-go").show();
				this.startDate = "";
				this.endDate = "";
			},
			search() {
				var that = this;
				that.getdate();
				console.log(that.smaxprice)
				if($(".my-housetype").text() == that.myItems1[0].label) {
					if(that.check_in_time.length == 10) {
						that.$router.push({
							path: '/shortList',
							query: {
								houseType: '2',
								cityId: that.cityId.toString(), //城市id
								mykey: that.mykey, //  string 否 自定义搜索词
								lat: that.lat, //  string 否经纬度
								lng: that.lng, //  string 否
								priceLow: that.sminprice.toString(), //  string 否最低价格
								priceLowHigh: that.smaxprice.toString(), //  string 否最高价格
								check_in_time: that.check_in_time.toString(), //  string 是 开始时间戳
								check_out_time: that.check_out_time.toString(), //  string 是 结束时间戳
							}
						})
					} else {
						that.$router.push({
							path: '/shortList',
							query: {
								houseType: '2',
								cityId: that.cityId.toString(), //城市id
								mykey: that.mykey, //  string 否 自定义搜索词
								lat: that.lat, //  string 否经纬度
								lng: that.lng, //  string 否
								priceLow: that.sminprice.toString(), //  string 否最低价格
								priceLowHigh: that.smaxprice.toString(), //  string 否最高价格
							}
						})
					}

				}
				if($(".my-housetype").text() == that.myItems1[1].label) {
					sessionStorage.setItem("house_type", 1);
					that.$router.push({
						path: "/longList",
						query: {
							houseType: '1',
							cityId: that.cityId.toString(), //城市id
							mykey: that.mykey, //  string 否 自定义搜索词
							lat: that.lat, //  string 否经纬度
							lng: that.lng, //  string 否
							price_bottom: that.sminprice.toString(), //  string 否最低价格
							price_top: that.smaxprice.toString(), //  string 否最高价格
						}
					})
				}
				var hissessset = [{
					"hiscity": $(".hissc-left span").text(),
					"hishousetype": $(".hismy-housetype").text(),
					"mykey": that.mykey, //  string 否 自定义搜索词
					"pricemaxtit": that.pricemaxtit, //  string 否最低价格
					"startDate": that.$refs.startDate.value, //  string 是 开始时间戳
					"endDate": that.$refs.endDate.value, //  string 是 结束时间戳
				}]
				if(sessionStorage.getItem("hissessset") == null) {

					sessionStorage.setItem("hissessset", JSON.stringify(hissessset));
				} else {
					console.log("历史记录")
					var getObj = JSON.parse(sessionStorage.getItem("hissessset"));
					console.log(getObj)
					let json3 = hissessset.concat(getObj)
					sessionStorage.setItem("hissessset", JSON.stringify(json3));
					that.historyList = json3;
					console.log(json3)
					that.histFlag = true;
				}
			},
			getLat() {

				var _this = this
				var map, geolocation;
				AMap.service(['AMap.Geolocation'], function() {
					geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：无穷大
						buttonPosition: 'RB'
					});
					geolocation.getCurrentPosition();
					AMap.event.addListener(geolocation, 'complete', _this.onComplete); //返回定位信息
					AMap.event.addListener(geolocation, 'error', _this.onError); //返回定位出错信息
				})
			},
			onComplete(data) {
				var that = this;
				that.city = false;
				var str = ['定位成功'];
				that.lng = data.position.getLng().toString();
				that.lat = data.position.getLat().toString();
				if(data.accuracy) {
					str.push('精度：' + data.accuracy + ' 米');
				} //如为IP精确定位结果则没有精度信息
				str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
			},
			onError(data) {
				var that = this;
				that.$dialog.toast({
					mes: "暂时无法定位您的位置",
					timeout: 1000
				});
			}
		}

	}
</script>

<style>
	@import url("../assets/css/caldate.css");
	@import url("../assets/css/cldate1.css");
	/*选中字体颜色*/
	
	.txtactive {
		color: #282828 !important;
	}
	/*叉叉*/
	
	.hismy-housetype {
		font-size: .36rem;
	}
	
	.yd-btn-block {
		margin-top: 0 !important;
		text-align: left;
	}
	
	.search #checkinout {
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		border: none !important;
	}
	
	.yd-icon-error-outline {
		font-size: .3rem !important;
		display: none;
	}
	
	.priceclear {
		display: block;
	}
	
	#checkinout .yd-icon-error-outline {
		font-size: .3rem !important;
		margin-left: 1.8rem;
	}
	/*时间选择*/
	
	.dateSelect {
		color: #282828;
		display: none;
	}
	
	.dateTable td>p,
	.hover {
		display: none;
	}
	
	#checkinout {
		margin: auto;
		border: none;
	}
	
	#endDate,
	#startDate {
		color: #282828;
	}
	
	.yd-flexbox-item-white,
	.yd-flexbox-item-gray {
		background: #FFFFFF;
		margin-bottom: 1px;
		line-height: 1.25rem;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #282828;
		font-size: .38rem;
		padding: 0 .24rem;
		box-sizing: border-box;
	}
	
	.yd-flexbox-item-gray {
		background: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		justify-content: initial;
	}
	
	.sc-left,
	.sc-right {
		display: -webkit-flex;
		display: flex;
		align-items: center;
	}
	
	.citysesect span {
		font-size: .42rem;
	}
	
	.mynearby .yd-icon-location {
		font-size: .28rem;
	}
	
	.scr-mapi span {
		display: block;
		line-height: .45rem;
		font-size: .28rem;
	}
	
	.sc-more {
		width: .19rem;
		height: .35rem;
		margin-left: .2rem;
	}
	
	.sc-mapicon {
		width: .5rem;
	}
	
	.search .yd-btn-block.yd-btn-primary {
		margin-top: 0;
		text-align: left;
	}
	
	.yd-btn-primary {
		background: none !important;
		color: #282828 !important;
		text-align: left;
		display: flex;
		justify-content: flex-start;
		width: 100%;
		height: 1.25rem;
		margin-top: initial;
		font-size: .35rem;
	}
	
	.sc-content {
		color: #a5a4a4;
		font-size: .3rem;
	}
	
	.scr-mapi {
		text-align: right;
		padding-left: .34rem;
		box-sizing: border-box;
		position: relative;
	}
	
	.scr-mapi::before {
		display: block;
		content: "";
		width: 1px;
		height: 70%;
		background: rgba(0, 0, 0, 0.1);
		position: absolute;
		top: 50%;
		left: -.1px;
		transform: translateY(-50%);
	}
	
	.scc-btn {
		border: none;
		border: 1px solid #EF4F4F;
		padding: .24rem 2.29rem;
		box-sizing: border-box;
		color: #EF4F4F;
		font-size: .35rem;
		margin: auto;
	}
	
	.yfig-icon img {
		width: .28rem;
		height: .28rem;
	}
	
	.yfig-content {
		line-height: .35rem;
	}
	
	.yfig-content {
		padding-left: .3rem;
		box-sizing: border-box;
	}
	
	.scc-btn-box {
		padding: .63rem 0;
		box-sizing: border-box;
	}
	
	.mykey {
		border: none;
		width: 100%;
		box-sizing: border-box;
	}
	
	.history-title {
		font-size: .28rem !important;
		color: #7a7a7a;
	}
	
	.history-city {
		font-size: .32rem;
	}
	
	.history-type {
		font-size: .25rem;
		color: #7D7D7D;
	}
	
	::-webkit-input-placeholder {
		color: #a5a4a4;
	}
</style>